import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import './index.scss'
import GRootPage from "../../components/RootPage";
import NotifyIcon from '../../assets/notify.png'
import BeansIcon from '../../assets/beans.png'
import AuthIcon from '../../assets/auth.png'
import AuthIcon2 from '../../assets/auth2.png'
import AssuranceIcon from '../../assets/assurance.png'
import InviteIcon from '../../assets/invite.png'
import LatelyIcon from '../../assets/lately.png'
import Constant from '../../utils/constant'

export default class User extends Component {

  onSettingClick = () => {
    Taro.showToast({ icon: 'none', title: '去设置' })
  }

  componentDidShow () {
    if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
      this.$scope.getTabBar().setData({
        selected: 2
      })
    }
  }

  componentWillMount () {
  }

  render () {
    return (
      <GRootPage scrollView={false} rootStyle={{ paddingTop: 0, paddingBottom: 100, backgroundColor: '#f7f7f7' }}>
        <ScrollView className='user-scroll scroll-y' scrollY>
          <View style={{ height: Constant.handlerPaddingTop }} />
          {/* 用户信息 */}
          <View className='user-header-box plr-30'>
            <Text className='iconfont icon-settings' onClick={this.onSettingClick} />
            <View className='user-info-box flex-row'>
              <View className='user-avatar-box' onClick={() => {
                Taro.navigateTo({ url: '/pages/user/currentdetail/index'})
              }}>
                <Image src='http://q1.qlogo.cn/g?b=qq&nk=704729872&s=640' className='user-avatar' />
                <Image src={AuthIcon} className='user-auth user-auth--mini' />
              </View>
              <View className='user-info flex-col'>
                <View className='user-info-top'>
                  <Text className='user-nickname'>曾小晨</Text>
                </View>
                <Text className='user-signature'>填写个人信息更容易被别人关注哦</Text>
              </View>
            </View>
          </View>
          {/* 用户信息菜单 */}
          <View className='user-footer flex-row'>
            <View className='user-footer-item flex-col flex-center'>
              <Text className='user-footer-item-count'>567</Text>
              <Text className='user-footer-item-label'>粉丝</Text>
            </View>
            <View className='user-footer-item flex-col flex-center'>
              <Text className='user-footer-item-count'>567</Text>
              <Text className='user-footer-item-label'>关注</Text>
            </View>
            <View className='user-footer-item flex-col flex-center'>
              <Text className='user-footer-item-count'>567</Text>
              <Text className='user-footer-item-label'>喜欢</Text>
            </View>
            {/*<View className='user-footer-item flex-col flex-center'>*/}
            {/*  <Text className='user-footer-item-count'>567</Text>*/}
            {/*  <Text className='user-footer-item-label'>收藏</Text>*/}
            {/*</View>*/}
          </View>
          {/* 广告 */}
          <View className='user-advertising plr-30'>
            <Image className='user-advertising-img' src='https://cdnst1.rryue.cn/photos/31388a70ac834cbbb7f80147e426a4c1.jpg' />
          </View>
          {/* 用户相关 */}
          <View className='user-menu mlr-30'>
            <View className='user-menu-item flex-row'>
              <Image className='user-menu-icon' src={BeansIcon} />
              <Text className='user-menu-label'>片豆</Text>
              <Text className='user-menu-count'>169</Text>
              <Text className='iconfont icon-iconfont-left' />
            </View>
            <View className='user-menu-item flex-row' onClick={() => {
              Taro.navigateTo({ url: '/pages/user/notify/index' })
            }}>
              <Image className='user-menu-icon' src={NotifyIcon} />
              <Text className='user-menu-label'>通知</Text>
              <View className='user-menu-count-bg-box flex-row'>
                <Text className='user-menu-count-bg'>16</Text>
              </View>
              <Text className='iconfont icon-iconfont-left' />
            </View>
            <View className='user-menu-item flex-row'>
              <Image className='user-menu-icon' src={LatelyIcon} />
              <Text className='user-menu-label'>最近浏览</Text>
              <Text className='iconfont icon-iconfont-left' />
            </View>
          </View>

          {/* 服务相关 */}
          <View className='user-menu mlr-30'>
            <View className='user-menu-item flex-row'>
              <Image className='user-menu-icon' src={AuthIcon2} />
              <Text className='user-menu-label'>身份认证</Text>
              <Text className='iconfont icon-iconfont-left' />
            </View>
            <View className='user-menu-item flex-row'>
              <Image className='user-menu-icon' src={AssuranceIcon} />
              <Text className='user-menu-label'>信用担保</Text>
              <Text className='iconfont icon-iconfont-left' />
            </View>
            <View className='user-menu-item flex-row'>
              <Image className='user-menu-icon' src={InviteIcon} />
              <Text className='user-menu-label'>邀请好友</Text>
              <Text className='iconfont icon-iconfont-left' />
            </View>
          </View>

          {/* 系统相关 */}
          <View className='user-menu mlr-30'>
            <View className='user-menu-item flex-row'>
              <Text className='user-menu-icon iconfont icon-bangzhu' />
              <Text className='user-menu-label'>帮助</Text>
              <Text className='iconfont icon-iconfont-left' />
            </View>
          </View>
        </ScrollView>
      </GRootPage>
    )
  }
}
